<template>
  <div class="pro-unit-wrap">
    <div class="bg" :class="[isChoosed ? 'active' : '']"></div>
    <div class="tit flex-center ellipsis one-line-ellipsis" v-if="isChoosed">
      20战斗机.word
    </div>
    <div class="tit-2 flex-center ellipsis one-line-ellipsis" v-else>
      20战斗机.word
    </div>
    <div class="time-con flex-center">
      <slot name="sx"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isChoosed: {
      default: false,
    },
  },
}
</script>

<style lang="scss" scoped>
.pro-unit-wrap {
  display: inline-block;
  // width: 12.5%;
  padding: 0 0.15rem;
  .bg {
    width: 100%;
    height: 17vh;
    background-image: url(~@/assets/showDataSubystem/file.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    border-radius: 0.1rem;
    // cursor: pointer;
    &.active {
      border: 2px solid #2acaff;
    }
  }
  .tit {
    margin-top: 0.05rem;
    padding: 0.02rem 0;
    width: 100%;
    background: #2acaff;
    border-radius: 0.05rem;
    font-size: 0.16rem;
    color: #ffffff;
  }
  .tit-2 {
    margin-top: 0.05rem;
    padding: 0.02rem 0;
    width: 100%;
    border-radius: 0.05rem;
    font-size: 0.16rem;
    color: #ffffff;
  }
  .time-con {
    font-size: 0.14rem;
    height: 0.3rem;
    line-height: 0.3rem;
    font-weight: 400;
    color: #aaaaaa;
  }
}
</style>
